<template>
  <!-- 数据列表 -->
  <div class="data_wrap">
    <!-- 搜索 -->
    <div class="search">
      <span>公司/部门名称：</span>
      <el-select v-model = "queryParam.orgCode" 
        style = "width:154px;margin-right:20px;height:36px">
        <el-option
          v-for = "(item, index) in orgCodeOptions"
          :key = "index"
          :label = "item.orgName"
          :value = "item.orgCode"
        ></el-option>
      </el-select>
      <span>科目：</span>
      <el-select v-model = "queryParam.feesCode" 
        style="width:154px;margin-right:20px;height:36px">
        <el-option
          v-for = "(item, index) in feesCodeOptions"
          :key = "index"
          :label = "item.name"
          :value = "item.value"
        ></el-option>
      </el-select>
      <span class = "demonstration">支出时间：</span>
      <el-date-picker
        placeholder = "开始日期"
        style = "width:160px;margin-right:12px"
        v-model = "queryParam.startTime" 
        :clearable = "false"
        value-format="yyyy-MM"
        :picker-options="startPickerOptions"
        type="month"
      ></el-date-picker>至
      <el-date-picker
        placeholder = "结束日期"
        style = "width:160px;margin-left:12px"
        v-model = "queryParam.endTime"
        :clearable = "false"
        value-format="yyyy-MM"
        type="month"
        :picker-options="endPickerOptions"
      ></el-date-picker>

      <el-button
        type = "primary"
        style = "width:52px;margin-left: 20px;padding:0px;height:36px"
        @click = "query">查询</el-button>
      <el-button 
        style = "width:52px;margin-left: 12px;padding:0px;height:36px" 
        @click = "resetQueryParam">重置</el-button>
    </div>
    <!-- 表格 -->
    <div class="table_data">
      <tableComponent :tableData = "tableData" :tableLabel = "tableLabel" :tableOption = "tableOption" />
    </div>
    <!-- 分页 -->
    <div class="pagination_wrap">
      <el-pagination
        background
        @size-change = "handleSizeChange"
        @current-change = "handleCurrentChange"
        :page-sizes = "paginationPageSizes"
        layout = "total, prev, pager, next, sizes,jumper"
        :current-page.sync = "paginationParam.currentPage"
        :page-size = "paginationParam.pageSize"
        :total = "paginationParam.total"
        style = "font-weight:400;"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import Pagination from "@/components/Popup/Pagination"; // 分页
let _that
export default {
  components: {
    Pagination,
    tableComponent : () => import('../../../comonComponent/table')
  },
  props: {
    orgCodeOptions: {
      type: Array,
      default: () => {
        return []
      },
    },
    feesCodeOptions: {
      type: Array,
      default: () => {
        return []
      },
    }
  },
  data() {
    return {
      // 搜索参数
      queryParam: {
        orgCode: '', // 公司/部门名称
        feesCode: '', // 科目名称
        startTime: "", //支出时间开始时间
        endTime: "" // 支出时间结束时间
      },
      paginationPageSizes: [10, 30, 50],
      paginationParam: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      startPickerOptions: {
          disabledDate(time) {
          return _that.queryParam.endTime ? (time.getTime() > new Date(_that.queryParam.endTime).getTime()) : ''
          }
      },
      endPickerOptions: {
          disabledDate(time) {
          return _that.queryParam.startTime ? (time.getTime() < new Date(_that.queryParam.startTime).getTime()) : ''
          }
      },
      // 表格配置参数
      tableData: [],
      tableLabel: [
        { type : 'index',label : '序号', width : '60', minWidth: '50', fixed : false, render : false, align : 'center'},
        { prop : 'orgName', label : '公司名称', minWidth: '500', fixed : false, render : false, align : 'center'},
        { prop : 'feesName', label : '科目', minWidth: '210', fixed : false, render : false, align : 'center'},
        { prop : 'amount', label : '金额（元）', minWidth: '190', fixed : false, render : false, align : 'center'},
        { prop : 'period', label : '支出时间', minWidth: '220', fixed : false, render : false, align : 'center'},
        // { prop : 'action', label : '操作', minWidth: '270', fixed : false, option: [],align : 'center',
        //   render : (h, params, data) => { 
        //     return h( 'span', {}, [ 
        //       h( "el-button", { class:'', props:{ size: 'mini' }, on : {
        //         click : () => {
        //           this.preview(params)
        //         }
        //       } }, '预览' ), 
        //       h( "el-button", { class:'', props:{ type: 'primary', size: 'mini' }, on : {
        //         click : () => {
        //           this.downLoad(params)
        //         }
        //       } }, '下载')
        //     ])
        //   } 
        // }
      ],
      tableOption : {
        loading: false,
        stripe: false,
        highlightCurrentRow : false,
        border : true,
        height : 610,
        maxHeight : '',
        resizable: false,
        headerCellStyle: {lineHeight: '46px', background: '#FAFAFA', padding: 0 },
        cellStyle: {height: '50px', padding: 0 }
      }
    }
  },
  created() {
    setTimeout(() => {
      this.loading = false;
    }, 500);
  },
  mounted() {
    _that = this
    // 修改分页器 中 '前往' -> '跳转至'
    document.getElementsByClassName(
      "el-pagination__jump"
    )[0].childNodes[0].nodeValue = "跳转至 ";
    this.queryData()
  },
  methods: {
    // 三公经费的数据列表数据获取
    queryData () {
      this.tableOption.loading = true
      let data = JSON.parse(JSON.stringify(this.queryParam))
      data.pageSize = this.paginationParam.pageSize
      data.pageNum = this.paginationParam.pageNum
      data.type = data.type === '0' ? '' : data.type
      this.Api.gettpConsumptionQuery(data).then(res => {
          if (res && res.code === '0') {
              this.tableData = res.data.records
              this.paginationParam.total = res.data.total
              if (Math.ceil(this.paginationParam.total / this.paginationParam.pageSize) < this.paginationParam.pageNum) {
                this.paginationParam.pageNum = Math.ceil(this.paginationParam.total / this.paginationParam.pageSize)
                this.queryData()
              }
          } else {
              this.tableData = []
              this.paginationParam.total = 0
              this.$message.warning(res.message)
          }
          this.tableOption.loading = false
      })
    },
    // 查询点击事件
    query() {
      this.queryData()
    },
    // 分页pageSize 改变触发事件 
    handleSizeChange(val) {
        this.paginationParam.pageSize = val
        this.queryData()
    },
    // 分页currentPage 改变触发事件
    handleCurrentChange(val) {
        this.paginationParam.pageNum = val
        this.queryData()
    },
    // 搜索栏重置事件
    resetQueryParam() {
      Object.assign(this.$data.queryParam, this.$options.data().queryParam);
      Object.assign(this.$data.paginationParam, this.$options.data().paginationParam);
      this.queryData()
    }
  },
};
</script>
<style lang="less" scoped>
.data_wrap {
  padding:0 20px;
  background: #fff; 
  width:100%;
  display: flex;
  flex-direction: column;
  // 搜索
  .search {
    margin-bottom: 20px;
    width:100%;
    /deep/ .el-input__inner {
      height: 36px;
    }
    /deep/.el-icon-date
    {
      line-height: 36px;
      position: absolute;
		  left: 120px;
    }
    /deep/.el-icon-arrow-up{
      line-height: 36px;
    }
  }
  .table_data {
    flex: 1;
  }
  // 下拉框样式
  .pagination_wrap {
    display: flex;
    justify-content: flex-end;
    bottom: 0;
    right: 0;
    /deep/ .el-pagination {
      margin-top: 0;
      padding-top:20px;
      padding-bottom:20px;
      line-height: normal;
    }
  }
}
</style>